<template>
	<view>
		<view class="head">
			<image src="../../static/images/arrow_left.png" mode=""></image>
			<view class="">采购入库</view>
			<view class="f32">全选</view>
		</view>
		<view class="number">
			<view class="numberLeft">订单号：1523453536557</view>
			<view class="numberRight">2020-03-23</view>
		</view>
		<view class="photo">
			<view class="photoHead"><image src="../../static/images/201916541220.jpg" mode=""></image></view>
			<view class="photoCenter">
				<view class="photoTop">12123(商品名）</view>
				<view class="photobot">欠:22</view>
			</view>
			<view class="photoRight">
				<view class="photoTop">
					<image :src="ImageUrl" mode="" @click="selectedCheck"></image>
					全部退货
				</view>
				<view class="photobot" @click="ShowBox">
					{{showZhan}}
					<image :src="zhanImage" mode=""></image>
				</view>
			</view>
		</view>
		<view class="box" v-show="Showbox">
			<view class="boxTop">
				<view class="boxLeft">规格(库存）</view>
				<view class="boxCenter">欠货</view>
				<view class="boxRight">退欠货数</view>
			</view>
			<view class="boxbot">
				<view class="boxLeft">尺寸</view>
				<view class="boxCenter">2(78.0)</view>
				<view class="boxRight">2</view>
			</view>
		</view>
<view class="but">
	<view class="butLeft">
本次发货总数：0
	</view>
		<button type="primary">确定入库</button>
</view>
	</view>
</template>

<script>
import stepper from '../../components/stepper/stepper.vue';
export default {
	data() {
		return {
			ImageUrl: '../../static/client/butt1.png', //图片地址
			Check: false, //选中
		Showbox:false,
		showZhan:'展开',
		zhanImage:'../../static/slice/1.png'
		};
	},
	methods: {
		changeNum(e) {
			console.log(e);
		
		},
		selectedCheck() {
			if (this.Check) {
				(this.ImageUrl = '../../static/client/butt1.png'), (this.Check = false);
			} else {
				(this.ImageUrl = '../../static/client/butt2.png'), (this.Check = true);
				// console.log(this.Check);
			}
		},
		ShowBox(){
			if(this.Showbox){
				this.showZhan='展开';
				this.zhanImage='../../static/slice/1.png';
				this.Showbox=false;
			}else{
				this.showZhan='收起';
				this.zhanImage='../../static/images/arrow_ondown.png';
				this.Showbox=true
			}
		}
	},
	components: {
		stepper
	}
};
</script>

<style lang="less">
page {
	background-color: #f7f4f8;
}
.head {
	height: 88rpx;
	line-height: 88rpx;
	background-color: #249af6;
	color: #ffffff;
	display: flex;
	justify-content: space-between;
	padding: 0 30rpx;
	font-size: 36rpx;
	font-family: PingFang SC;
	font-weight: 500;
	image {
		width: 22rpx;
		height: 39rpx;
		margin-top: 25rpx;
	}
}
.number {
	height: 103rpx;
	line-height: 103rpx;
	padding-left: 30rpx;
	padding-right: 30rpx;
	margin-top: 30rpx;
	background-color: #ffffff;
	display: flex;
	justify-content: space-between;
	font-size: 30rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: rgba(51, 51, 51, 1);
	border-bottom: 2rpx solid #eeeeee;
	.numberRight {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #666666;
	}
}
.photo {
	height: 164rpx;
	background-color: #ffffff;
	padding-left: 30rpx;
	padding-right: 30rpx;
	padding-top: 30rpx;
	box-sizing: border-box;
	display: flex;
	.photoHead {
		height: 100rpx;
		width: 100rpx;
		// background-color: blue;
		border-radius: 50%;
		overflow: hidden;
		image {
			width: 100rpx;
			height: 100rpx;
		}
	}
	.photoCenter {
		margin-left: 36rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
		line-height: 36rpx;
	}
	.photobot {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(102, 102, 102, 1);
		line-height: 88rpx;
	}
	.photoRight {
		margin-left: 180rpx;
		.photoTop {
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(102, 102, 102, 1);
			image {
				width: 32rpx;
				height: 32rpx;
				position: relative;
				left: -20rpx;
				top: 5rpx;
			}
		}
		.photobot {
			text-align: right;
			color: #249af6;
			image {
				width: 17rpx;
				height: 10rpx;
				margin-left: 20rpx;
			}
		}
	}
}
.box {
	height: 212rpx;
	.boxTop {
		height: 100rpx;
		line-height: 100rpx;
		background-color: #eeeeee;
		display: flex;
		justify-content: space-evenly;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		border-bottom: 2rpx solid #cccccc;
	}
	.boxbot{
			height: 100rpx;
			line-height: 100rpx;
		display: flex;
		background-color: #EEEEEE;
		color: #666666;
		font-size:32rpx;
		font-family:PingFang SC;
		font-weight:500;
		justify-content: space-between;
		padding-left: 106rpx;
		padding-right: 160rpx;
	.boxCenter{
		position: relative;
		left: 30rpx;
	}
	}
}
.but{
	width: 100%;
	height: 110rpx;
	position: fixed;
	bottom: 0;
	background-color: #FFFFFF;
	display: flex;
	box-sizing: border-box;
	font-size:30rpx;
	font-family:PingFang SC;
	font-weight:500;
		line-height: 110rpx;
		padding-left: 29rpx;
	.butLeft{
		width: 495rpx;
		background-color: #FFFFFF;
	}
	button{
		line-height: 110rpx;
		flex: 1;
		font-size:30rpx;
	
	}

}
</style>

